<template lang="html">
  <div class="ict-menber-view">
    <ict-titlebar :left-options="{showBack: true}" v-el:titlebar>素材库</ict-titlebar>
    <div class="page">
      <!-- <scroller :scrollbar-x=false lock-y> -->
        <!-- <div style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;"> -->
          <tab bar-active-color="#00b0f0" :line-width="0">
             <tab-item selected active-class="active" v-touch:tap="menberInvitation">邀请合伙人</tab-item>
             <tab-item active-class="active" v-touch:tap="goodsPromotion">邀请学习</tab-item>
             <tab-item active-class="active" v-touch:tap="course">专属课程</tab-item>
          </tab>
        <!-- </div> -->
      <!-- </scroller> -->
        <menber-invitation class="menberInvitation"></menber-invitation>
        <goods-promotion class="goodsPromotion"></goods-promotion>
        <exclusive-course class="course"></exclusive-course>
    </div>
  </div>
</template>

<script>
import Scroller from 'vux/scroller'
import IctTitlebar from '../../components/IctTitleBar.vue'
import {Tab, TabItem} from 'vux'
import MenberInvitation from './material/MenberInvitation.vue'
import GoodsPromotion from './material/GoodsPromotion.vue'
import ExclusiveCourse from './material/ExclusiveCourse.vue'

export default {
  ready () {
    setTimeout (() => {
      let material = ['goodsPromotion', 'course']
      for (var i = 0; i < material.length; i++) {
        document.getElementsByClassName(material[i])[0].style.display = 'none';
      }
    }, 500)
  },
  methods: {
    /**
     * tab切换
     */
    menberInvitation () {
      let material = ['menberInvitation', 'goodsPromotion', 'course']
      for (var i = 0; i < material.length; i++) {
        document.getElementsByClassName(material[i])[0].style.display = 'none';
      }
      document.getElementsByClassName('menberInvitation')[0].style.display = 'block';
    },
    goodsPromotion () {
      let material = ['menberInvitation', 'goodsPromotion', 'course']
      for (var i = 0; i < material.length; i++) {
        document.getElementsByClassName(material[i])[0].style.display = 'none';
      }
      document.getElementsByClassName('goodsPromotion')[0].style.display = 'block';
    },
    course () {
      let material = ['menberInvitation', 'goodsPromotion', 'course']
      for (var i = 0; i < material.length; i++) {
        document.getElementsByClassName(material[i])[0].style.display = 'none';
      }
      document.getElementsByClassName('course')[0].style.display = 'block';
    }
  },
  components: {
    IctTitlebar,
    Tab,
    TabItem,
    Scroller,
    MenberInvitation,
    GoodsPromotion,
    ExclusiveCourse
  }
}
</script>

<style lang="less">
.active {
  color: #00b0f0 !important;
  border-color: #00b0f0 !important;
}
.item {
  color: #aaa;
}
.vux-tab .vux-tab-item{
  font-size:12px;
}
</style>
